<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>注册</title>
</head>
<body>
<form action="registersuccess.html" method="POST" onsubmit="return checkForm();">
  用户名：<input type="text" name="username" id="usernameID" onkeyup="checkName();"/>
  <span id="usernameMsg"></span><br/><br/>
  密码：<input type="password" name="password" id="passwordID" onkeyup="checkPassword();"/>
  <span id="passwordMsg"></span><br/><br/>
  手机号：<input type="text" name="phone" id="phoneID" onkeyup="checkPhone();"/>
  <span id="phoneMsg"></span><br/><br/>
  <input type="submit" value="注册"/>
  <input type="reset" value="重置"/>
</form>
<script>
  // 1.定义全局变量用于接收数据
  var usernameObj;
  var passwordObj;
  var phoneObj;
  var usernameMsg;
  var passwordMsg;
  var phoneMsg;
  // 2.用生命周期函数获取标签对象
  window.onload=function(){
    // 2.1获取输入控件标记对象
    usernameObj=document.getElementById("usernameID");
    passwordObj=document.getElementById("passwordID");
    phoneObj=document.getElementById("phoneID");
    // 2.2获取错误信息的标记对象
    usernameMsg=document.getElementById("usernameMsg")
    passwordMsg=document.getElementById("passwordMsg")
    phoneMsg=document.getElementById("phoneMsg")
  }
  // 3.校验用户名
  function checkName(){
    // 3.1获取用户名
    var value = usernameObj.value;
    // 3.2创建正则表达式校验用户名
    var regx=/^[a-zA-Z]\w{5,11}&/;    //用户名以字母开头，包含字母数字下划线，长度6-12位
    // 3.3校验操作
    if(value==""){
      usernameMsg.innerHTML="用户名必须填写";
      return false;
    }else if(!regx.test(value)){
      usernameMsg.innerHTML="用户名必须以字母开头，包含字母数字下划线，长度6-12位";
      return false
    }else{
      usernameMsg.innerHTML="";
      return true
    }
  }
  // 4.校验密码
  function checkPassword(){
    // 4.1 获取密码
    var value=passwordObj.value
    // 4.2 创建正则校验密码
    var regx=/^[a-zA-Z0-9]{3,6}$/   //密码是字母和数字组成，长度3-6位
    // 4.3 校验
    if(value==""){
      passwordMsg.innerHTML="密码必须填写!"
      return false
    }else if(!regx.test(value)){
      passwordMsg.innerHTML="密码必须字母和数字组成且长度是3-6位!"
      return false
    }else{
      passwordMsg.innerHTML=""
      return true
    }
  }
  // 5.校验手机号
  function checkPhone(){
    // 5.1 获取手机号
    var value=passwordObj.value
    // 5.2 创建正则表达式
    var regx=/^1[3|5|8|7][0-9]{9}$/
    // 5.3 校验
    if(value==""){
      phoneMsg.innerHTML="手机号必须填写"
      return false
    }else if(!regx.test(vale)){
      phoneMsg.innerHTML="请输入正确手机号"
      return false;
    }else{
      phoneMsg.innerHTML=""
      return true
    }
  }
  // 6.表单整体校验
  function checkForm(){
    var usernameflag=checkName();
    var passwordflag=checkPassword();
    var phoneflag=checkPhone();
    return usernameflag && passwordflag && phoneflag;

  }


</script>
</body>
</html>